<template>
  <div class="login-container">
    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="wave wave1"></div>
      <div class="wave wave2"></div>
      <div class="wave wave3"></div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="login-content">
      <!-- 左侧信息面板 -->
      <div class="info-panel">
        <div class="logo-section">
          <div class="logo">
            <i class="icon-customs">🛃</i>
          </div>
          <h1 class="system-title">中华人民共和国海关</h1>
          <h2 class="system-subtitle">智能监管平台</h2>
        </div>
        <div class="features">
          <div class="feature-item">
            <i class="feature-icon">🔒</i>
            <span>安全可靠的身份认证</span>
          </div>
          <div class="feature-item">
            <i class="feature-icon">👁️</i>
            <span>先进的人脸识别技术</span>
          </div>
          <div class="feature-item">
            <i class="feature-icon">⚡</i>
            <span>高效便捷的通关体验</span>
          </div>
        </div>
      </div>
      
      <!-- 右侧登录表单 -->
      <div class="form-panel">
        <div class="form-container">
          <!-- 标签页切换 -->
          <div class="tab-switcher">
            <button 
              :class="['tab-btn', { active: currentTab === 'login' }]"
              @click="switchTab('login')"
            >
              登录
            </button>
            <button 
              :class="['tab-btn', { active: currentTab === 'register' }]"
              @click="switchTab('register')"
            >
              注册
            </button>
          </div>
          
          <!-- 登录表单 -->
          <div v-if="currentTab === 'login'" class="form-content">
            <h3 class="form-title">欢迎回来</h3>
            <p class="form-subtitle">请选择登录方式</p>
            
            <!-- 登录方式切换 -->
            <div class="login-mode-switcher">
              <button 
                :class="['mode-btn', { active: loginMode === 'password' }]"
                @click="switchLoginMode('password')"
              >
                <i class="mode-icon">🔑</i>
                密码登录
              </button>
              <button 
                :class="['mode-btn', { active: loginMode === 'face' }]"
                @click="switchLoginMode('face')"
              >
                <i class="mode-icon">👤</i>
                人脸登录
              </button>
            </div>
            
            <!-- 密码登录表单 -->
            <form v-if="loginMode === 'password'" @submit.prevent="handleLogin" class="auth-form">
              <div class="form-group">
                <label class="form-label">用户名</label>
                <div class="input-wrapper">
                  <i class="input-icon">👤</i>
                  <input 
                    v-model="loginForm.name"
                    type="text" 
                    class="form-input"
                    placeholder="请输入用户名"
                    required
                  >
                </div>
              </div>
              
              <div class="form-group">
                <label class="form-label">密码</label>
                <div class="input-wrapper">
                  <i class="input-icon">🔒</i>
                  <input 
                    v-model="loginForm.password"
                    :type="showPassword ? 'text' : 'password'"
                    class="form-input"
                    placeholder="请输入密码"
                    required
                  >
                  <button 
                    type="button"
                    class="password-toggle"
                    @click="showPassword = !showPassword"
                  >
                    {{ showPassword ? '👁️' : '🙈' }}
                  </button>
                </div>
              </div>
              
              <button type="submit" class="submit-btn" :disabled="loginLoading">
                <span v-if="loginLoading" class="loading-spinner"></span>
                {{ loginLoading ? '登录中...' : '登录' }}
              </button>
            </form>
            
            <!-- 人脸登录界面 -->
            <div v-if="loginMode === 'face'" class="face-login-section">
              <div class="face-login-header">
                <h4 class="face-title">人脸识别登录</h4>
                <p class="face-subtitle">请将面部对准摄像头进行识别</p>
              </div>
              
              <div class="camera-container">
                <video 
                  ref="videoElement"
                  v-show="!capturedImage && cameraActive"
                  class="camera-preview"
                  autoplay
                  muted
                ></video>
                <canvas ref="canvasElement" style="display: none;"></canvas>
                <img 
                  v-if="capturedImage"
                  :src="capturedImage"
                  class="captured-image"
                  alt="Captured face"
                >
                
                <!-- 摄像头未启动时的占位符 -->
                <div v-if="!cameraActive" class="camera-placeholder">
                  <div class="placeholder-icon">📷</div>
                  <p class="placeholder-text">点击下方按钮开始人脸识别</p>
                </div>
                
                <div v-if="cameraActive && !capturedImage" class="camera-overlay">
                  <div class="face-frame">
                    <div class="face-guide-text">请将面部置于框内</div>
                  </div>
                  <div class="scanning-line"></div>
                </div>
              </div>
              
              <div class="face-controls">
                <!-- 未启动摄像头状态 -->
                <button 
                  v-if="!cameraActive"
                  @click="startCameraAndCapture"
                  class="face-action-btn primary"
                  :disabled="faceLoginLoading"
                >
                  <span class="btn-icon">🚀</span>
                  <span class="btn-text">开始人脸识别</span>
                </button>
                
                <!-- 摄像头已启动，显示实时预览 -->
                <template v-else-if="!capturedImage">
                  <button 
                    @click="captureAndLogin"
                    class="face-action-btn primary pulse"
                    :disabled="faceLoginLoading"
                  >
                    <span v-if="faceLoginLoading" class="loading-spinner"></span>
                    <span v-else class="btn-icon">📸</span>
                    <span class="btn-text">{{ faceLoginLoading ? '识别中...' : '立即识别' }}</span>
                  </button>
                  <button @click="stopCamera" class="face-action-btn secondary">
                    <span class="btn-icon">❌</span>
                    <span class="btn-text">取消</span>
                  </button>
                </template>
                
                <!-- 已拍照状态 -->
                <template v-else>
                  <button 
                    @click="handleFaceLogin"
                    class="face-action-btn primary"
                    :disabled="faceLoginLoading"
                  >
                    <span v-if="faceLoginLoading" class="loading-spinner"></span>
                    <span v-else class="btn-icon">🔍</span>
                    <span class="btn-text">{{ faceLoginLoading ? '识别中...' : '确认登录' }}</span>
                  </button>
                  <button @click="retakeImage" class="face-action-btn secondary">
                    <span class="btn-icon">🔄</span>
                    <span class="btn-text">重新拍照</span>
                  </button>
                </template>
              </div>
            </div>
          </div>
          
          <!-- 注册表单 -->
          <div v-if="currentTab === 'register'" class="form-content">
            <h3 class="form-title">创建账户</h3>
            <p class="form-subtitle">请选择注册方式</p>
            
            <!-- 注册方式切换 -->
            <div class="login-mode-switcher">
              <button 
                :class="['mode-btn', { active: registerMode === 'normal' }]"
                @click="switchRegisterMode('normal')"
              >
                <i class="mode-icon">📝</i>
                普通注册
              </button>
              <button 
                :class="['mode-btn', { active: registerMode === 'face' }]"
                @click="switchRegisterMode('face')"
              >
                <i class="mode-icon">👤</i>
                人脸注册
              </button>
            </div>
            
            <!-- 普通注册表单 -->
            <form v-if="registerMode === 'normal'" @submit.prevent="handleRegister" class="auth-form">
              <div class="form-row">
                <div class="form-group">
                  <label class="form-label">用户名</label>
                  <div class="input-wrapper">
                    <i class="input-icon">👤</i>
                    <input 
                      v-model="registerForm.name"
                      type="text" 
                      class="form-input"
                      placeholder="请输入用户名"
                      required
                    >
                  </div>
                </div>
                
                <div class="form-group">
                  <label class="form-label">真实姓名</label>
                  <div class="input-wrapper">
                    <i class="input-icon">🏷️</i>
                    <input 
                      v-model="registerForm.realName"
                      type="text" 
                      class="form-input"
                      placeholder="请输入真实姓名"
                      required
                    >
                  </div>
                </div>
              </div>
              
              <div class="form-group">
                <label class="form-label">密码</label>
                <div class="input-wrapper">
                  <i class="input-icon">🔒</i>
                  <input 
                    v-model="registerForm.password"
                    :type="showRegisterPassword ? 'text' : 'password'"
                    class="form-input"
                    placeholder="请输入密码"
                    required
                  >
                  <button 
                    type="button"
                    class="password-toggle"
                    @click="showRegisterPassword = !showRegisterPassword"
                  >
                    {{ showRegisterPassword ? '👁️' : '🙈' }}
                  </button>
                </div>
              </div>
              
              <div class="form-row">
                <div class="form-group">
                  <label class="form-label">手机号</label>
                  <div class="input-wrapper">
                    <i class="input-icon">📱</i>
                    <input 
                      v-model="registerForm.phoneNumber"
                      type="tel" 
                      class="form-input"
                      placeholder="请输入手机号"
                    >
                  </div>
                </div>
                
                <div class="form-group">
                  <label class="form-label">邮箱</label>
                  <div class="input-wrapper">
                    <i class="input-icon">📧</i>
                    <input 
                      v-model="registerForm.email"
                      type="email" 
                      class="form-input"
                      placeholder="请输入邮箱"
                    >
                  </div>
                </div>
              </div>
              
              <button type="submit" class="submit-btn" :disabled="registerLoading">
                <span v-if="registerLoading" class="loading-spinner"></span>
                {{ registerLoading ? '注册中...' : '注册' }}
              </button>
            </form>
            
            <!-- 人脸注册表单 -->
            <div v-if="registerMode === 'face'" class="face-register-section">
              <!-- 基础信息表单 -->
              <form @submit.prevent="handleFaceRegister" class="auth-form">
                <div class="form-row">
                  <div class="form-group">
                    <label class="form-label">用户名</label>
                    <div class="input-wrapper">
                      <i class="input-icon">👤</i>
                      <input 
                        v-model="faceRegisterForm.name"
                        type="text" 
                        class="form-input"
                        placeholder="请输入用户名"
                        required
                      >
                    </div>
                  </div>
                  
                  <div class="form-group">
                    <label class="form-label">真实姓名</label>
                    <div class="input-wrapper">
                      <i class="input-icon">🏷️</i>
                      <input 
                        v-model="faceRegisterForm.realName"
                        type="text" 
                        class="form-input"
                        placeholder="请输入真实姓名"
                        required
                      >
                    </div>
                  </div>
                </div>
                
                <div class="form-group">
                  <label class="form-label">密码</label>
                  <div class="input-wrapper">
                    <i class="input-icon">🔒</i>
                    <input 
                      v-model="faceRegisterForm.password"
                      :type="showFaceRegisterPassword ? 'text' : 'password'"
                      class="form-input"
                      placeholder="请输入密码"
                      required
                    >
                    <button 
                      type="button"
                      class="password-toggle"
                      @click="showFaceRegisterPassword = !showFaceRegisterPassword"
                    >
                      {{ showFaceRegisterPassword ? '👁️' : '🙈' }}
                    </button>
                  </div>
                </div>
                
                <div class="form-row">
                  <div class="form-group">
                    <label class="form-label">手机号</label>
                    <div class="input-wrapper">
                      <i class="input-icon">📱</i>
                      <input 
                        v-model="faceRegisterForm.phoneNumber"
                        type="tel" 
                        class="form-input"
                        placeholder="请输入手机号"
                      >
                    </div>
                  </div>
                  
                  <div class="form-group">
                    <label class="form-label">邮箱</label>
                    <div class="input-wrapper">
                      <i class="input-icon">📧</i>
                      <input 
                        v-model="faceRegisterForm.email"
                        type="email" 
                        class="form-input"
                        placeholder="请输入邮箱"
                      >
                    </div>
                  </div>
                </div>
                
                <!-- 人脸采集区域 -->
                <div class="face-capture-section">
                  <label class="form-label">人脸信息采集</label>
                  <div class="camera-container small">
                    <video 
                      ref="registerVideoElement"
                      v-show="!registerCapturedImage"
                      class="camera-preview"
                      autoplay
                      muted
                    ></video>
                    <canvas ref="registerCanvasElement" style="display: none;"></canvas>
                    <img 
                      v-if="registerCapturedImage"
                      :src="registerCapturedImage"
                      class="captured-image"
                      alt="Captured face for registration"
                    >
                    <div class="camera-overlay">
                      <div class="face-frame"></div>
                    </div>
                  </div>
                  
                  <div class="face-controls">
                    <button 
                      v-if="!registerCameraActive"
                      type="button"
                      @click="startRegisterCamera"
                      class="camera-btn start-btn"
                    >
                      📷 启动摄像头
                    </button>
                    <template v-else>
                      <button 
                        v-if="!registerCapturedImage"
                        type="button"
                        @click="captureRegisterImage"
                        class="camera-btn capture-btn"
                      >
                        📸 拍照
                      </button>
                      <button 
                        v-else
                        type="button"
                        @click="retakeRegisterImage"
                        class="camera-btn retry-btn"
                      >
                        🔄 重新拍照
                      </button>
                    </template>
                  </div>
                </div>
                
                <button 
                  type="submit" 
                  class="submit-btn" 
                  :disabled="faceRegisterLoading || !registerCapturedImage"
                >
                  <span v-if="faceRegisterLoading" class="loading-spinner"></span>
                  {{ faceRegisterLoading ? '注册中...' : '完成注册' }}
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 消息提示 -->
    <div v-if="message.show" :class="['message-toast', message.type]">
      <i class="message-icon">
        {{ message.type === 'success' ? '✅' : message.type === 'error' ? '❌' : 'ℹ️' }}
      </i>
      <span>{{ message.text }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { login, faceLogin, register, faceRegister } from '@/assets/api/login.js'

const router = useRouter()

// 响应式数据
const currentTab = ref('login')
const loginMode = ref('password')
const registerMode = ref('normal')
const showPassword = ref(false)
const showRegisterPassword = ref(false)
const showFaceRegisterPassword = ref(false)

// 加载状态
const loginLoading = ref(false)
const faceLoginLoading = ref(false)
const registerLoading = ref(false)
const faceRegisterLoading = ref(false)

// 摄像头相关
const cameraActive = ref(false)
const registerCameraActive = ref(false)
const capturedImage = ref('')
const registerCapturedImage = ref('')
const videoElement = ref(null)
const canvasElement = ref(null)
const registerVideoElement = ref(null)
const registerCanvasElement = ref(null)
let mediaStream = null
let registerMediaStream = null

// 表单数据
const loginForm = reactive({
  name: '',
  password: ''
})

const registerForm = reactive({
  name: '',
  realName: '',
  password: '',
  phoneNumber: '',
  email: ''
})

const faceRegisterForm = reactive({
  name: '',
  realName: '',
  password: '',
  phoneNumber: '',
  email: '',
  faceImage: '',
  groupId: 1
})

// 消息提示
const message = reactive({
  show: false,
  type: 'info',
  text: ''
})

// 方法定义
const switchTab = (tab) => {
  currentTab.value = tab
  resetForms()
}

const switchLoginMode = (mode) => {
  loginMode.value = mode
  if (mode === 'face') {
    stopCamera()
    capturedImage.value = ''
  }
}

const switchRegisterMode = (mode) => {
  registerMode.value = mode
  if (mode === 'face') {
    stopRegisterCamera()
    registerCapturedImage.value = ''
  }
}

const resetForms = () => {
  Object.assign(loginForm, { name: '', password: '' })
  Object.assign(registerForm, { name: '', realName: '', password: '', phoneNumber: '', email: '' })
  Object.assign(faceRegisterForm, { name: '', realName: '', password: '', phoneNumber: '', email: '', faceImage: '', groupId: 1 })
  capturedImage.value = ''
  registerCapturedImage.value = ''
  stopCamera()
  stopRegisterCamera()
}

const showMessage = (type, text) => {
  message.show = true
  message.type = type
  message.text = text
  setTimeout(() => {
    message.show = false
  }, 3000)
}

// 摄像头操作
const startCamera = async () => {
  try {
    mediaStream = await navigator.mediaDevices.getUserMedia({ 
      video: { width: 640, height: 480 } 
    })
    videoElement.value.srcObject = mediaStream
    cameraActive.value = true
    showMessage('success', '摄像头启动成功')
  } catch (error) {
    console.error('摄像头启动失败:', error)
    showMessage('error', '摄像头启动失败，请检查权限设置')
  }
}

const stopCamera = () => {
  if (mediaStream) {
    mediaStream.getTracks().forEach(track => track.stop())
    mediaStream = null
  }
  cameraActive.value = false
}

const captureImage = () => {
  const canvas = canvasElement.value
  const video = videoElement.value
  const context = canvas.getContext('2d')
  
  canvas.width = video.videoWidth
  canvas.height = video.videoHeight
  context.drawImage(video, 0, 0)
  
  capturedImage.value = canvas.toDataURL('image/jpeg', 0.8)
  stopCamera()
}

// 新增：启动摄像头并自动进入拍照模式
const startCameraAndCapture = async () => {
  await startCamera()
  // 给用户一点时间调整位置
  setTimeout(() => {
    if (cameraActive.value) {
      showMessage('info', '请调整面部位置，3秒后自动拍照')
    }
  }, 1000)
}

// 新增：拍照并立即登录
const captureAndLogin = async () => {
  captureImage()
  // 短暂延迟后自动开始识别
  setTimeout(() => {
    handleFaceLogin()
  }, 500)
}

const retakeImage = () => {
  capturedImage.value = ''
  startCamera()
}

// 注册摄像头操作
const startRegisterCamera = async () => {
  try {
    registerMediaStream = await navigator.mediaDevices.getUserMedia({ 
      video: { width: 640, height: 480 } 
    })
    registerVideoElement.value.srcObject = registerMediaStream
    registerCameraActive.value = true
    showMessage('success', '摄像头启动成功')
  } catch (error) {
    console.error('摄像头启动失败:', error)
    showMessage('error', '摄像头启动失败，请检查权限设置')
  }
}

const stopRegisterCamera = () => {
  if (registerMediaStream) {
    registerMediaStream.getTracks().forEach(track => track.stop())
    registerMediaStream = null
  }
  registerCameraActive.value = false
}

const captureRegisterImage = () => {
  const canvas = registerCanvasElement.value
  const video = registerVideoElement.value
  const context = canvas.getContext('2d')
  
  canvas.width = video.videoWidth
  canvas.height = video.videoHeight
  context.drawImage(video, 0, 0)
  
  registerCapturedImage.value = canvas.toDataURL('image/jpeg', 0.8)
  faceRegisterForm.faceImage = registerCapturedImage.value.split(',')[1] // 去掉data:image/jpeg;base64,前缀
  stopRegisterCamera()
}

const retakeRegisterImage = () => {
  registerCapturedImage.value = ''
  faceRegisterForm.faceImage = ''
  startRegisterCamera()
}

// 登录处理
const handleLogin = async () => {
  loginLoading.value = true
  try {
    const response = await login(loginForm)
    if (response.data.code === 200) {
      showMessage('success', '登录成功！')
      // 存储用户信息到localStorage
      localStorage.setItem('userInfo', JSON.stringify(response.data.data))
      // 跳转到主页面
      setTimeout(() => {
        router.push('/collection')
      }, 1500)
    } else {
      showMessage('error', response.data.message || '登录失败')
    }
  } catch (error) {
    console.error('登录错误:', error)
    showMessage('error', '登录失败，请检查网络连接')
  } finally {
    loginLoading.value = false
  }
}

const handleFaceLogin = async () => {
  if (!capturedImage.value) {
    showMessage('error', '请先拍照')
    return
  }
  
  faceLoginLoading.value = true
  try {
    const faceData = {
      faceImage: capturedImage.value.split(',')[1], // 去掉data:image/jpeg;base64,前缀
      groupId: 1
    }
    
    const response = await faceLogin(faceData)
    if (response.data.code === 200) {
      showMessage('success', '人脸识别登录成功！')
      // 存储用户信息到localStorage
      localStorage.setItem('userInfo', JSON.stringify(response.data.data))
      // 跳转到主页面
      setTimeout(() => {
        router.push('/')
      }, 1500)
    } else {
      showMessage('error', response.data.message || '人脸识别失败')
    }
  } catch (error) {
    console.error('人脸登录错误:', error)
    showMessage('error', '人脸识别失败，请重试')
  } finally {
    faceLoginLoading.value = false
  }
}

// 注册处理
const handleRegister = async () => {
  registerLoading.value = true
  try {
    const response = await register(registerForm)
    if (response.data.code === 200) {
      showMessage('success', '注册成功！请登录')
      setTimeout(() => {
        switchTab('login')
      }, 1500)
    } else {
      showMessage('error', response.data.message || '注册失败')
    }
  } catch (error) {
    console.error('注册错误:', error)
    showMessage('error', '注册失败，请检查网络连接')
  } finally {
    registerLoading.value = false
  }
}

const handleFaceRegister = async () => {
  if (!registerCapturedImage.value) {
    showMessage('error', '请先采集人脸信息')
    return
  }
  
  faceRegisterLoading.value = true
  try {
    const response = await faceRegister(faceRegisterForm)
    if (response.data.code === 200) {
      showMessage('success', '人脸注册成功！请登录')
      setTimeout(() => {
        switchTab('login')
      }, 1500)
    } else {
      showMessage('error', response.data.message || '人脸注册失败')
    }
  } catch (error) {
    console.error('人脸注册错误:', error)
    showMessage('error', '人脸注册失败，请重试')
  } finally {
    faceRegisterLoading.value = false
  }
}

// 生命周期
onMounted(() => {
  // 组件挂载时的初始化操作
})

onUnmounted(() => {
  // 清理摄像头资源
  stopCamera()
  stopRegisterCamera()
})
</script>

<style scoped>
/* 全局容器样式 */
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  font-family: 'Microsoft YaHei', sans-serif;
}

/* 背景装饰波浪 */
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.wave {
  position: absolute;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 45%;
  animation: wave-animation 20s infinite linear;
}

.wave1 {
  top: -50%;
  left: -50%;
  animation-duration: 25s;
}

.wave2 {
  top: -60%;
  left: -60%;
  animation-duration: 30s;
  animation-direction: reverse;
}

.wave3 {
  top: -70%;
  left: -70%;
  animation-duration: 35s;
}

@keyframes wave-animation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 主要内容区域 */
.login-content {
  display: flex;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 90%;
  max-width: 1200px;
  min-height: 600px;
  z-index: 1;
  backdrop-filter: blur(10px);
}

/* 左侧信息面板 */
.info-panel {
  flex: 1;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: white;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.info-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

.logo-section {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

.logo {
  margin-bottom: 20px;
}

.icon-customs {
  font-size: 80px;
  display: block;
  margin-bottom: 20px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.system-title {
  font-size: 32px;
  font-weight: bold;
  margin: 0 0 10px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
}

.system-subtitle {
  font-size: 18px;
  font-weight: 300;
  margin: 0;
  opacity: 0.9;
  letter-spacing: 1px;
}

.features {
  position: relative;
  z-index: 1;
}

.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.feature-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(10px);
}

.feature-icon {
  font-size: 24px;
  margin-right: 15px;
  width: 40px;
  text-align: center;
}

/* 右侧表单面板 */
.form-panel {
  flex: 1;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-container {
  width: 100%;
  max-width: 400px;
}

/* 标签页切换 */
.tab-switcher {
  display: flex;
  margin-bottom: 30px;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 4px;
}

.tab-btn {
  flex: 1;
  padding: 12px 20px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #6c757d;
}

.tab-btn.active {
  background: #007bff;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

/* 表单内容 */
.form-content {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-title {
  font-size: 28px;
  font-weight: bold;
  color: #2c3e50;
  margin: 0 0 8px 0;
  text-align: center;
}

.form-subtitle {
  color: #6c757d;
  text-align: center;
  margin: 0 0 30px 0;
  font-size: 14px;
}

/* 登录方式切换器 */
.login-mode-switcher {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

.mode-btn {
  flex: 1;
  padding: 15px;
  border: 2px solid #e9ecef;
  background: white;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #6c757d;
}

.mode-btn:hover {
  border-color: #007bff;
  background: #f8f9ff;
}

.mode-btn.active {
  border-color: #007bff;
  background: #007bff;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.mode-icon {
  font-size: 20px;
}

/* 表单样式 */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: flex;
  gap: 15px;
}

.form-group {
  flex: 1;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #2c3e50;
  font-size: 14px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 15px;
  font-size: 16px;
  color: #6c757d;
  z-index: 1;
}

.form-input {
  width: 100%;
  padding: 15px 15px 15px 45px;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: white;
}

.form-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.password-toggle {
  position: absolute;
  right: 15px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 5px;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.password-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* 提交按钮 */
.submit-btn {
  padding: 15px;
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
  transform: translateY(-2px);
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* 加载动画 */
.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 人脸登录区域 */
.face-login-section {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.face-login-header {
  text-align: center;
  margin-bottom: 10px;
}

.face-title {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 8px 0;
}

.face-subtitle {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

.camera-container {
  position: relative;
  width: 100%;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 3px solid #007bff;
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.15);
  transition: all 0.3s ease;
}

.camera-container:hover {
  box-shadow: 0 12px 35px rgba(0, 123, 255, 0.25);
  transform: translateY(-2px);
}

.camera-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #6c757d;
}

.placeholder-icon {
  font-size: 48px;
  margin-bottom: 15px;
  opacity: 0.7;
}

.placeholder-text {
  font-size: 16px;
  margin: 0;
  text-align: center;
}

.camera-container.small {
  height: 200px;
}

.camera-preview,
.captured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.face-frame {
  position: relative;
  width: 220px;
  height: 280px;
  border: 4px solid rgba(0, 123, 255, 0.9);
  border-radius: 50%;
  background: rgba(0, 123, 255, 0.05);
  animation: pulse 2s infinite;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 20px;
}

.face-guide-text {
  background: rgba(0, 123, 255, 0.9);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.scanning-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #007bff, transparent);
  animation: scanning 2s infinite;
}

@keyframes scanning {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* 摄像头控制按钮 */
.face-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.face-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 140px;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.face-action-btn.primary {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.face-action-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
  transform: translateY(-2px);
}

.face-action-btn.primary.pulse {
  animation: pulse-btn 2s infinite;
}

@keyframes pulse-btn {
  0%, 100% { box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); }
  50% { box-shadow: 0 6px 25px rgba(0, 123, 255, 0.6); }
}

.face-action-btn.secondary {
  background: linear-gradient(135deg, #6c757d 0%, #545b62 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

.face-action-btn.secondary:hover:not(:disabled) {
  background: linear-gradient(135deg, #545b62 0%, #495057 100%);
  box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
  transform: translateY(-2px);
}

.face-action-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none !important;
}

.btn-icon {
  font-size: 18px;
}

.btn-text {
  font-weight: 600;
}



/* 人脸采集区域 */
.face-capture-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

.face-register-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 消息提示 */
.message-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 20px;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1000;
  animation: slideIn 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.message-toast.success {
  background: #28a745;
}

.message-toast.error {
  background: #dc3545;
}

.message-toast.info {
  background: #17a2b8;
}

.message-icon {
  font-size: 18px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-content {
    flex-direction: column;
    width: 95%;
    min-height: auto;
  }
  
  .info-panel {
    padding: 40px 20px;
  }
  
  .system-title {
    font-size: 24px;
  }
  
  .form-panel {
    padding: 30px 20px;
  }
  
  .form-row {
    flex-direction: column;
    gap: 20px;
  }
  
  .login-mode-switcher {
    flex-direction: column;
  }
  
  .mode-btn {
    flex-direction: row;
    justify-content: center;
  }
  
  .camera-container {
    height: 250px;
  }
  
  .face-controls {
    flex-direction: column;
  }
  
  .captured-controls {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 10px;
  }
  
  .form-container {
    max-width: none;
  }
  
  .system-title {
    font-size: 20px;
  }
  
  .icon-customs {
    font-size: 60px;
  }
  
  .message-toast {
    top: 10px;
    right: 10px;
    left: 10px;
    transform: none;
  }
  
  @keyframes slideIn {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}
</style>